/**
 * @description 日历
 * */
import {CalendarData, IDateConfig, IProps, RenderConfig} from "@/types/y-calendar";
import './style/calendar.scss';

export class Calendar {
    isRender: boolean = false; // 是否渲染
    // 默认渲染配置
    renderConfig: RenderConfig = {
        id:'',
        el: null,
        weekMap: ["日", "一", "二", "三", "四", "五", "六"],
        monthMap: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        yearMin: new Date().getFullYear() - 20, // 最小选择年份
        yearMax: new Date().getFullYear() + 20, // 最大选择年份
        rowCount: 6,// 日期显示行数
        sundayFirst: false, // 星期天是否排第一天
        weekFormatter: null, // 星期格式化方法
        monthFormatter: null, // 月份格式方法
        // 输入框配置
        inputConfig: {
            show: true,
            placeholder:'请输入日期，年-月-日或年/月/日格式'
        },
        // 右侧栏配置
        sideConfig: {
            show: true,
        },
    }
    create?: Function | null = null;
    mounted?: Function | null = null;
    destroy?: Function | null = null;
    dateConfig?:IDateConfig = {
        year: null,
        month: null,
        day: null,
        date: undefined
    };

    // 日历对象数据体
    calendarData: CalendarData = {
        sundayFirst: false,
        date: undefined,
        year: null,
        month: null,
        day: null,
        week: {},
        weeks: [],
        days: [],
        dayRows: [],
        totalDays: 0,
        currMonthFirstDay:0,
        prevMonthSumDays:0,
        currMonthSumDays:0,
    };
    container?: any = null; // 容器
    calendarElements: any = {};
    timer: any;
    // 日历创建方法
    createCalendarFun: any = {
        createInputBox: () => {
            if(this.renderConfig?.inputConfig) {
                const {show, placeholder} = this.renderConfig.inputConfig;
                if(show) {
                    const input = document.createElement("input");
                    input.type = "text";
                    input.className = 'search-input';
                    if(placeholder) input.placeholder = placeholder;
                    const inputBox = document.createElement('div');
                    inputBox.className = 'search-input-wrap';
                    inputBox.appendChild(input);
                    this.calendarElements.INPUT = input;
                    this.calendarElements.INPUT_BOX = inputBox;
                }
            }
        },
        createSelectBox: () => {
            const selectBox = document.createElement('div');
            selectBox.className = 'select-wrap';
            // 年份选择
            const yearSelectWrap = document.createElement("span");
            yearSelectWrap.className = 'year-select-wrap';
            const yearSelect = document.createElement("select");
            const {yearMin, yearMax} = this.renderConfig;
            // @ts-ignore
            for (let i: number = yearMin; i <= yearMax; i++) {
                const option = document.createElement("option");
                option.value = i.toString();
                option.innerHTML = i + "年";
                yearSelect.appendChild(option);
            }
            yearSelectWrap.appendChild(yearSelect);
            selectBox.appendChild(yearSelectWrap);
            // 月份选择
            const monthSelectWrap = document.createElement("span");
            monthSelectWrap.className = 'month-select-wrap';
            const monthSelect = document.createElement("select");
            const { monthMap } = this.renderConfig;
            if(monthMap){
                for (let i = 1; i <= monthMap.length; i++) {
                    const option = document.createElement("option");
                    option.value = i.toString();
                    option.innerHTML = monthMap[i - 1];
                    monthSelect.appendChild(option);
                }
            }
            // 月份选择左箭头
            const leftArrow = document.createElement("span");
            leftArrow.className = 'month-select-prev';
            const rightArrow = document.createElement("span");
            rightArrow.className = 'month-select-next';
            // 月份选择右箭头
            monthSelectWrap.appendChild(leftArrow);
            monthSelectWrap.appendChild(monthSelect);
            monthSelectWrap.appendChild(rightArrow);
            selectBox.appendChild(monthSelectWrap);
            // 返回今天按钮
            const backToday = document.createElement("button");
            backToday.innerText = '返回今天';
            backToday.className = 'back-today';
            selectBox.appendChild(backToday);

            this.calendarElements.BACK_TODAY = backToday;
            this.calendarElements.YEAR_SELECT = yearSelect;
            this.calendarElements.MONTH_SELECT = monthSelect;
            this.calendarElements.MONTH_SELECT_PREV = leftArrow;
            this.calendarElements.MONTH_SELECT_NEXT = rightArrow;
            this.calendarElements.SELECT_BOX = selectBox;
        },
        createDateTable: () => {
            const {weekMap, rowCount, sundayFirst} = this.renderConfig;
            const table = document.createElement("table");
            // 星期
            if(weekMap) {
                const weekTr = document.createElement('tr');
                weekTr.className = 'week-row';
                const sundayFirstList: number[] = [0,1,2,3,4,5,6];
                const sundayLastList: number[] = [1,2,3,4,5,6,0];
                for (let i = 0; i < weekMap.length; i++) {
                    const th = document.createElement("th");
                    th.className = 'week';
                    // sundayFirst 是否星期天排第一天 计算设置星期值
                    if(sundayFirst){
                        th.innerHTML = weekMap[sundayFirstList[i]]
                    } else {
                        th.innerHTML = weekMap[sundayLastList[i]]
                    }
                    weekTr.appendChild(th);
                }
                table.appendChild(weekTr);
            }
            // 日期
            if(rowCount) {
                for (let i = 0; i < rowCount; i++) {
                    const tr = document.createElement("tr");
                    tr.className = 'day-row';
                    for (let j = 0; j < 7; j++) {
                        const td = document.createElement("td");
                        td.className = 'day';
                        td.innerText = 'day'
                        tr.appendChild(td);
                    }
                    table.appendChild(tr);
                }
            }
            this.calendarElements.DATE_TABLE = table;
            // 获取所有ths
            this.calendarElements.DATE_TABLE_THS = table.getElementsByTagName("th");
            // 获取所有 day
            this.calendarElements.DATE_TABLE_TDS = table.getElementsByTagName("td");
        },
        creatLeftSideBox: () => {
            const leftSideBox = document.createElement('div');
            leftSideBox.className = 'left-side-box';
            this.calendarElements.LEFT_SIDE_BOX = leftSideBox;
        },
        createRightSideBox: () => {
            const rightSideBox = document.createElement('div');
            rightSideBox.className = 'right-side-box';
            // 年月日-星期外包裹盒子
            const dateWeekShow = document.createElement("div");
            dateWeekShow.className = 'date-week-show';
            //日期 x年x月x日
            const currDate = document.createElement("span");
            currDate.className = "curr-date";
            dateWeekShow.appendChild(currDate);
            //星期几
            const currWeek = document.createElement("span");
            currWeek.className = "curr-week";
            dateWeekShow.appendChild(currWeek);
            rightSideBox.appendChild(dateWeekShow);
            // 当前日期 几号
            const currDayWarp = document.createElement("div");
            currDayWarp.className = "curr-day-show";
            const currDay = document.createElement("span");
            currDay.className = "curr-day";
            currDayWarp.appendChild(currDay);
            rightSideBox.appendChild(currDayWarp);
            // 动态 时-分-秒
            this.calendarElements.CURR_DATE = currDate;
            this.calendarElements.CURR_WEEK = currWeek;
            this.calendarElements.CURR_DAY = currDay;
            this.calendarElements.RIGHT_SIDE_BOX = rightSideBox;
        },
        createCalendarBox:() => {
            const calendarWrap = document.createElement('div');
            calendarWrap.className = 'calender-wrap';
            const calendar = document.createElement('div');
            calendar.className = 'calender-content';
            this.calendarElements.CALENDAR = calendar;
            this.calendarElements.CALENDAR_WRAP = calendarWrap;
        },
        createCurrTime: () => {
            const ul = document.createElement('ul');
            for(let i = 0; i < 9; i++){
                const li = document.createElement('li');
                ul.appendChild(li);
            }
            const lis: any = ul.children;
            lis[2].innerText = "时";
            lis[5].innerText = "分";
            lis[8].innerText = "秒";
            this.timer && clearInterval(this.timer);
            const timer = setInterval(function () {
                const DATE = new Date();
                const hour = DATE.getHours();
                const minute = DATE.getMinutes();
                const second = DATE.getSeconds();
                lis[0].innerText = parseInt(String(hour / 10));
                lis[1].innerText = hour % 10;
                lis[3].innerText = parseInt(String(minute / 10));
                lis[4].innerText = minute % 10;
                lis[6].innerText = parseInt(String(second / 10));
                lis[7].innerText = second % 10;
            }, 1000);
            // 累积处理后渲染
            const currTime = document.createElement("div");
            currTime.className = "curr-time-show";
            currTime.appendChild(ul);
            this.calendarElements.CURR_TIME = currTime;
        },
    }

    constructor(props: IProps = {}) {
        // isRender
        this.isRender = !!props?.isRender;
        // renderConfig
        if(props?.renderConfig){
            Object.assign(this.renderConfig, props.renderConfig)
        }
        // dateConfig
        if(props?.dateConfig){
            Object.assign(this.dateConfig, props.dateConfig)
        }
        // create
        if(typeof props?.create === 'function') {
            this.create = props?.create;
        }
        // mounted
        if(typeof props?.mounted === 'function') {
            this.mounted = props?.mounted;
        }
        // destroy
        if(typeof props?.destroy === 'function') {
            this.destroy = props?.destroy;
        }
        // 初始化
        this.init();
        // 是否渲染判断
        if(this.isRender){
            this.render();
        }
    }
    // 创建相关元素
    createCalendar(){
        this.create && this.create();
        Object.keys(this.createCalendarFun).forEach((key: string) => {
            this.createCalendarFun[key] && this.createCalendarFun[key]();
        });
    }
    // 挂载相关元素
    mountedCalendar(){
        if(!this.container) return;
        const {inputConfig, sideConfig} = this.renderConfig;
        const {CALENDAR_WRAP, CALENDAR, INPUT_BOX, LEFT_SIDE_BOX, SELECT_BOX, DATE_TABLE, RIGHT_SIDE_BOX,CURR_TIME} = this.calendarElements;
        if(inputConfig && inputConfig.show){
            CALENDAR_WRAP.appendChild(INPUT_BOX);
        }
        // SELECT_BOX
        LEFT_SIDE_BOX.appendChild(SELECT_BOX);
        // DATE_TABLE
        LEFT_SIDE_BOX.appendChild(DATE_TABLE);
        // LEFT_SIDE_BOX
        CALENDAR.appendChild(LEFT_SIDE_BOX);
        // sideConfig
        if(sideConfig && sideConfig.show){
            // CURR_TIME
            RIGHT_SIDE_BOX.appendChild(CURR_TIME);
            // RIGHT_SIDE_BOX
            CALENDAR.appendChild(RIGHT_SIDE_BOX);
        }
        // CALENDAR
        CALENDAR_WRAP.appendChild(CALENDAR);
        // 各元素赋值
        this.setCalendarElementsValue();
        // 日历各元素绑定事件
        this.calendarElementsBindEvent();
        // 挂载
        this.container.appendChild(CALENDAR_WRAP);
        this.mounted && this.mounted();
    }
    // 设置各元素对象内容值
    setCalendarElementsValue(){
        const {days, currMonthFirstDay, day, date,week} = this.calendarData;
        this.calendarElements.YEAR_SELECT.value = this.calendarData.year;
        this.calendarElements.MONTH_SELECT.value = this.calendarData.month;
        // days
        if(Array.isArray(days)){
            for(let i=0; i< days.length; i++){
                const {type, year, month, day, date} = days[i];
                this.calendarElements.DATE_TABLE_TDS[i].innerText = day;
                // 清除之前的样式
                this.calendarElements.DATE_TABLE_TDS[i].className = '';
                this.calendarElements.DATE_TABLE_TDS[i].classList = [];
                this.calendarElements.DATE_TABLE_TDS[i].classList.add(`${type}-month`);
                this.calendarElements.DATE_TABLE_TDS[i].dataset.type = type;
                this.calendarElements.DATE_TABLE_TDS[i].dataset.day = day;
                this.calendarElements.DATE_TABLE_TDS[i].dataset.month = month;
                this.calendarElements.DATE_TABLE_TDS[i].dataset.year = year;
                //
                if(date === this.calendarData.date){
                    // 当前日期 day
                    this.calendarElements.DATE_TABLE_TDS[i].classList.add('today');
                }
            }
        }
        // 当前日期 day
        //@ts-ignore
        // this.calendarElements.DATE_TABLE_TDS[currMonthFirstDay + day - 1].classList.add('today');
        // CURR_DATE
        this.calendarElements.CURR_DATE.innerText = date;
        // CURR_WEEK
        this.calendarElements.CURR_WEEK.innerText = week?.name;
        // CURR_DAY
        this.calendarElements.CURR_DAY.innerText = day;
    }
    // 日历各元素绑定事件
    calendarElementsBindEvent(){
        // INPUT 输入框框
        if(this.calendarElements.INPUT){
            this.calendarElements.INPUT.onkeyup = (event: Event) => {
                // @ts-ignore
                const key = event.key;
                // @ts-ignore
                const keyCode: any = event.keyCode
                const target: any = event.target || event.srcElement;
                const value =  target.value;
                // Enter键按下后弹起事件
                if('Enter' === key || 13 === keyCode){
                    const dateReg0 = new RegExp(/(^[\d]{4}-((0?[1-9])|([1][0-2]))-((0?[1-9])|([1-2][0-9])|([3][0-1]))$)|(^[\d]{4}\/((0?[1-9])|([1][0-2]))\/((0?[1-9])|([1-2][0-9])|([3][0-1]))$)/);
                    const dateReg = /^[\d]{4}[-/.]((0?[1-9])|([1][0-2]))[-/.]((0?[1-9])|([1-2][0-9])|([3][0-1]))$/;
                    // 正则校验拦截一部分不规范输入
                    if(dateReg.test(value)){
                        if(this.calendarElements.INPUT_ERROR){
                            this.calendarElements.INPUT_ERROR.innerText = '';
                            this.calendarElements.INPUT_ERROR.classList = []
                            this.calendarElements.INPUT_ERROR.classList = 'input-error input-error-hide';
                        }
                        const execReg = new RegExp(/^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})$/g);
                        const result = execReg.exec(value);
                        if(result){
                            const year = parseInt(result[1]);
                            const month = parseInt(result[2]);
                            const day = parseInt(result[3]);
                            const date = `${year}-${month}-${day}`
                            Object.assign(this.dateConfig,{year,month,day,date});
                            this.reRender();
                        }
                    } else if(this.calendarElements.INPUT_ERROR) {
                        this.calendarElements.INPUT_ERROR.innerText = '请输入正确格式的日期';
                        this.calendarElements.INPUT_ERROR.classList = []
                        this.calendarElements.INPUT_ERROR.classList = 'input-error input-error-show';
                        // this.calendarElements.INPUT_BOX
                    } else {
                        // INPUT_BOX 校验提示
                        this.calendarElements.INPUT_ERROR = document.createElement('div');
                        this.calendarElements.INPUT_ERROR.classList = 'input-error input-error-show';
                        this.calendarElements.INPUT_ERROR.innerText = '请输入正确格式的日期';
                        this.calendarElements.INPUT_BOX.appendChild( this.calendarElements.INPUT_ERROR);
                    }
                }
            }
            this.calendarElements.INPUT.onblur = (event: Event) => {
                if(this.calendarElements.INPUT_ERROR) {
                    this.calendarElements.INPUT_ERROR.innerText = '';
                    this.calendarElements.INPUT_ERROR.classList = []
                    this.calendarElements.INPUT_ERROR.classList = 'input-error input-error-hide';
                }
            }
        }

        // 年选择事件
        if(this.calendarElements.YEAR_SELECT){
            this.calendarElements.YEAR_SELECT.onchange = (event: Event) =>{
                const target: any = event.target || event.srcElement;
                const value =  target.value;
                // @ts-ignore
                this.dateConfig.year = target?.value;
                this.reRender();
            };
        }
        // 月选择事件
        if(this.calendarElements.MONTH_SELECT) {
            this.calendarElements.MONTH_SELECT.onchange = (event: Event) =>{
                const target: any = event.target || event.srcElement;
                // @ts-ignore
                this.dateConfig.month = target?.value;
                this.reRender();
            };
        }
        // 月左箭头点击事件
        if(this.calendarElements.MONTH_SELECT_PREV) {
            this.calendarElements.MONTH_SELECT_PREV.onclick = (event: Event) =>{
                let currMonth: any = this.dateConfig?.month;
                let currYear: any = this.dateConfig?.year;
                if(currMonth && currYear){
                    if(currMonth > 1 ) {
                        currMonth --;
                    } else {
                        currMonth = 12;
                        currYear --;
                    }
                    Object.assign(this.dateConfig,{year:currYear,month:currMonth});
                }
                this.reRender();
            };
        }
        // 月右箭头点击事件
        if(this.calendarElements.MONTH_SELECT_NEXT) {
            this.calendarElements.MONTH_SELECT_NEXT.onclick = (event: Event) =>{
                let currMonth: any = this.dateConfig?.month;
                let currYear: any = this.dateConfig?.year;
                if(currMonth && currYear){
                    if(currMonth < 12){
                        currMonth++;
                    } else {
                        currMonth = 1;
                        currYear ++;
                    }
                    Object.assign(this.dateConfig,{year: currYear, month: currMonth});
                }
                this.reRender();
            };
        }
        // 返回今天
        if(this.calendarElements.BACK_TODAY) {
            this.calendarElements.BACK_TODAY.onclick = (event: Event) => {
                const todayDate = new Date();
                const year = todayDate.getFullYear();
                const month = todayDate.getMonth() + 1;
                const day = todayDate.getDate();
                const date = `${year}-${month}-${day}`;
                Object.assign(this.dateConfig, {year,month, day, date});
                this.reRender();
            }
        }
        // 某天点击事件 事件代理
        if(this.calendarElements.DATE_TABLE) {
            this.calendarElements.DATE_TABLE.onclick = (event: Event) => {
                const target: any = event.target || event.srcElement;
                const nodeName = target.nodeName;
                if(nodeName === 'TD'){
                    // // className classList
                    // const className = target.className;
                    // const classList = target.classList;
                    // dataset
                    const year = target?.dataset?.year;
                    const month = target?.dataset?.month;
                    const day = target?.dataset?.day;
                    const date = `${year}-${month}-${day}`;
                    Object.assign(this.dateConfig, {year,month, day, date});
                    this.reRender();
                }
            }
        }
    }
    reRender(){
        // @ts-ignore
        this.getCalendarData(this.dateConfig);
        // 各元素赋值
        this.setCalendarElementsValue();
    }
    // 获取日历对象数据
    getCalendarData(dateConfig: IDateConfig){
        const {date, year, month, day} = {...this.dateConfig,...dateConfig};
        let DATE = date;

        let YEAR = null, MONTH = null, DAY = null;
        if(!isNaN(parseInt(<string>year))){
            YEAR = parseInt(<string>year);
        }
        if(!isNaN(parseInt(<string>month))){
            MONTH = parseInt(<string>month);
        }
        if(!isNaN(parseInt(<string>day))){
            DAY = parseInt(<string>day);
        }
        if(YEAR || MONTH || DAY){
            const dateObj = new Date();
            if(!YEAR) YEAR = dateObj.getFullYear();
            if(!MONTH) MONTH = dateObj.getMonth() + 1;
            if(!DAY) DAY = dateObj.getDate();
            DATE = `${YEAR}-${MONTH}-${DAY}`;
        } else if(DATE) {
            const dateObj = new Date(DATE);
            YEAR = dateObj.getFullYear();
            MONTH = dateObj.getMonth() + 1;
            DAY = dateObj.getDate();
        } else {
            const dateObj = new Date();
            YEAR = dateObj.getFullYear();
            MONTH = dateObj.getMonth() + 1;
            DAY = dateObj.getDate();
            DATE = `${YEAR}-${MONTH}-${DAY}`;
        }
        this.calendarData.date = DATE;
        this.calendarData.year = YEAR;
        this.calendarData.month = MONTH;
        this.calendarData.day = DAY;
        // @ts-ignore
        this.dateConfig.date = DATE;
        // @ts-ignore
        this.dateConfig.year = YEAR;
        // @ts-ignore
        this.dateConfig.month = MONTH;
        // @ts-ignore
        this.dateConfig.day = DAY;

        // 星期几计算 week计算
        this.getWeek()
        // weeks 计算
        this.getWeeks();
        // days dayRows totalDays currMonthFirstDay prevMonthSumDays currMonthSumDays 计算
        this.getDays({
            year:this.calendarData.year,
            month:this.calendarData.month,
            day:this.calendarData.day,
            date:this.calendarData.date
        });
        return this.calendarData;
    }
    // 获取某天星期几方法
    getWeek(date: string = ''){
        const DATE = date || String(this.calendarData.date);
        const {weekMap} = this.renderConfig;
        // 星期几计算 week计算
        const weekValue = new Date(DATE).getDay();
        let weekMapName = '';
        if (weekMap) {
            weekMapName = weekMap[weekValue];
        }
        const week = {
            value: weekValue,
            name: weekMapName || weekValue.toString()
        };
        this.calendarData.week = week;
        return week;
    }
    getWeeks(){
        const weeks: any[] = [];
        const {weekMap, sundayFirst} = this.renderConfig;
        // weeks 计算
        if(Array.isArray(weekMap)) {
            const sundayFirstList: number[] = [0,1,2,3,4,5,6];
            const sundayLastList: number[] = [1,2,3,4,5,6,0];
            // sundayFirst 是否星期天排第一天 计算设置星期值
            if(sundayFirst){
                for(let k=0; k< sundayFirstList.length; k++){
                    weeks[k] = weekMap[sundayFirstList[k]]
                }
            } else {
                for(let k=0; k< sundayLastList.length; k++){
                    weeks[k] = weekMap[sundayLastList[k]]
                }
            }
        }
        this.calendarData.weeks = weeks;
        return weeks;
    }
    // days dayRows totalDays currMonthFirstDay prevMonthSumDays currMonthSumDays
    getDays(dateConfig: IDateConfig){
        const {date, year, month, day} = dateConfig;
        const {sundayFirst, rowCount} = this.renderConfig;
        const days = [];
        // 获取当前月第一天 是周几 利用Date()对象属性
        let currMonthFirstDay: any = new Date(`${year}-${month}-1`).getDay();
        if(!sundayFirst){
            // sundayFirst 是否星期天排第一天
            if(currMonthFirstDay > 0){
                currMonthFirstDay = currMonthFirstDay -1;
            } else {
                currMonthFirstDay = 6;
            }
        }
        this.calendarData.currMonthFirstDay = currMonthFirstDay;
        // 获取上月多少天
        // @ts-ignore
        this.calendarData.prevMonthSumDays =  new Date(new Date(parseInt(String(year)), parseInt(String(month)) - 1, 1) - 1).getDate();
        // 获取本月多少天
        this.calendarData.currMonthSumDays = (function () {
            switch (month) {
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                case 12:
                    return 31;
                case 4:
                case 6:
                case 9:
                case 11:
                    return 30;
                case 2:
                    // @ts-ignore
                    if (year % 4 == 0 && year % 100 == 0 || year % 400 == 0) {
                        return 29;
                    }
                    return 28;
            }
        })();

        // @ts-ignore
        const lastMonth = month - 1;
        // @ts-ignore
        //上月
        for (let i = 0; i < this.calendarData.currMonthFirstDay; i++) {
            // @ts-ignore
            let day = this.calendarData.prevMonthSumDays - this.calendarData.currMonthFirstDay + 1 + i;
            days.push({
                type: 'prev',
                year: year,
                month: lastMonth,
                day: day,
                date: `${year}-${lastMonth}-${day}`
            });
        }
        //本月
        for (let i = currMonthFirstDay; i < this.calendarData.currMonthSumDays + currMonthFirstDay; i++) {
            let day = i - currMonthFirstDay + 1;
            days.push({
                type: 'curr',
                year: year,
                month: month,
                day: day,
                date: `${year}-${month}-${day}`
            });
        }
        // @ts-ignore
        this.calendarData.totalDays = 7 * rowCount;
        // @ts-ignore
        const nextMonth = month + 1;
        // 下月
        for (let i = currMonthFirstDay + this.calendarData.currMonthSumDays; i <  this.calendarData.totalDays; i++) {
            let day = i - (currMonthFirstDay + this.calendarData.currMonthSumDays) + 1;
            days.push({
                type: 'next',
                year: year,
                month: nextMonth,
                day: day,
                date: `${year}-${nextMonth}-${day}`
            });
        }
        // days
        this.calendarData.days = days;
        // dayRows
        let rows: any[] = [];
        const dayRows: any[] = [];
        for(let j = 0; j< days.length; j++){
            rows.push(days[j]);
            if((j+1) % 7 === 0){
                dayRows.push([...rows]);
                rows = [];
            }
        }
        this.calendarData.dayRows = dayRows;
        return days;
    }
    // 初始化数据
    init(){
        this.getCalendarData({});
    }
    // 渲染
    render(){
        const {el, id}  = this.renderConfig;
        this.container = el ? el: id ? document.getElementById(id) : null;
        // 如果需要挂载的容器不存在，则不渲染
        if(!this.container) return;
        // 生命周期 创建
        this.createCalendar();
        // 生命周期 挂载
        this.mountedCalendar();
    }
}
